<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <title>登陆</title>
<style>
    html,body {
        height: 100%;
    }
    .box {
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#6699FF), to(#66FFFF));
            margin: 0 auto;
            position: relative;
            width: 100%;
            height: 100%;
            background-image: url(images/loginbcg.jpg);
            background-repeat: no-repeat;
            background-size:100% 100%;
            
    }
    .login-box {
            width: 100%;
            max-width:500px;
            height: 400px;
            position: absolute;
            top: 50%;

            margin-top: -200px;
            /*设置负值，为要定位子盒子的一半高度*/
            
        }
    @media screen and (min-width:500px){
            .login-box {
                left: 50%;
                /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
    }    
    
    .form {
        width: 100%;
        max-width:500px;
        height: 275px;
        margin: 25px auto 0px auto;
        padding-top: 25px;
    }    
    .login-content {
        height: 300px;
        width: 100%;
        max-width:500px;
        background-color: rgba(255, 250, 2550, .6);
        float: left;
        background-image: url(images/qietu.png);
        border-radius: 10px;
    }        
        
        
    .input-group {
        margin: 0px 0px 30px 0px !important;
    }
    .form-control,
    .input-group {
        height: 40px;
    }
    
    .form-group {
        margin-bottom: 0px !important;
    }
    .login-title {
        padding: 20px 10px;
        background-color: rgba(0, 0, 0, .6);
    }
    .login-title h1 {
        margin-top: 10px !important;
    }
    .login-title small {
        color: #fff;
    }

    .link p {
        line-height: 20px;
        margin-top: 30px;
    }
    .btn-sm {
        padding: 8px 24px !important;
        font-size: 16px !important;
    }
    
    #username{
        margin-left: 25%;
        border-radius: 5px;
        margin-top: 8.3em;
        
    }
    #password{
        margin-left: 25%;
        margin-top: 4%;
        border-radius: 5px;
       
    }
    #user{
        line-height: 260px;
        position: absolute;
        padding: 0 15%;
        color: #4B6E92;
        font-size: 0.9rem;
    }
    #pwd{
        line-height: 63px;
        position: absolute;
        padding: 0 15%;
        color: #4B6E92;
        font-size: 0.9rem;
    }
    #login{
        width: 5em;
        height: 2.5em;
        margin: 1em;
        margin-left: 51%;
    }
    #reset{
        width: 5em;
        height: 2.6em;
        margin: 1em;
        margin-left: -11%;
    }
</style>


</head>

<body>
<div class="box">
        <div class="login-box">
            <div class="login-content ">
            <div class="form">
            <form action="#" method="post">
                <div class="col-xs-12">
                    <p id="user">账号:</p><input type="text" id="username" name="username" placeholder="请输入账号"/>
                    <input type="checkbox">   记住账号
                    
                </div>
               <div class="col-xs-12">
                    <p id="pwd">密码:</p><input type="text" id="password" name="password"  placeholder="请输入密码"/>
                    <input type="checkbox">   记住密码
                    
               </div>
              
                <div class="form-group">
                    <div class="col-xs-6 link">
                        <img id="login" src="images/登陆.png" alt="">
                    </div>
                    <div class="col-xs-6 link">
                        <img id="reset" src="images/重置.png" alt="">
                    </div>
                    
                </div>
            </form>
            </div>
        </div>
    </div>
</div>


</body>

</html>